<template>
  <div class="mask flex" @click.self="handeClose">
    <div class="imgBox">
      <div class="box-top flex">
        <Bar
          @refresh="refresh"
          @changeValue="changeValue"
          :buttons="[{ name: '上传', key: '1' }]"
          @btnEvent="handelbtnEvent"
        />
      </div>
      <div class="box-buttom flex">
        <div
          class="box-buttom-left"
          @drop="handelDrop($event)"
          @dragover="handelDropOver($event)"
        >
          <el-scrollbar height="100%">
            <div
              class="grupName-item"
              v-for="(item, index) in grupNames"
              :key="index"
            >
              <el-button
                style="width: 100%"
                :type="
                  active == index
                    ? 'primary'
                    : '' || Number(moveActive) == item.text
                      ? 'success'
                      : ''
                "
                @click="handelClick(index)"
                :is="item.text"
              >
                {{ item.text }}
              </el-button>
            </div>
          </el-scrollbar>
        </div>
        <div class="box-buttom-right" v-loading="handelLoading">
          <el-scrollbar height="100%">
            <div
              class="warp"
              :style="`grid-template-rows: repeat(${Math.ceil(listData.length / 5)}, 1fr);`"
            >
              <div
                v-for="(item, index) in listData"
                :key="index"
                draggable="true"
                @dragstart="handeldragstart($event, item)"
              >
                <imageItem :data="item"></imageItem>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
  <uploadFile v-model:viseble="viseble" />
</template>

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { ossGetInfo, GetFileList, UploadInformation } from "@/api/files";
import type { FileDataFace } from "./imgGrupTypes";
import imageItem from "./imageItem.vue";
import Bar from "@/components/titelBar/index.vue";
import uploadFile from "./uploadFile.vue";
const {
  proxy: { $forceUpdate },
}: any = getCurrentInstance();
const emit = defineEmits(["update:show"]);
const active = ref(0);
const moveActive = ref(99999);
const grupNames = ref([]);
const listData = ref<FileDataFace[]>([]);
const handelLoading = ref(false);
const viseble = ref(false);
const groupName = ref("");
const inputValue = ref("");
const handeClose = () => {
  emit("update:show", false);
};

const handelbtnEvent = (key: string) => {
  if (key === '1') {
    debugger
    viseble.value = true;
  }
};

const handelClick = (index: number) => {
  if (active.value === index) return;
  active.value = index;
  if (index === 0) {
    groupName.value = "";
  } else {
    groupName.value = grupNames.value[index].text;
  }
  getData();
};
const changeValue = (e: string) => {
  inputValue.value = e;
  if (e) {
    getData();
  }
};
const refresh = () => {
  moveActive.value = 99999;
  getData();
};
const getData = async () => {
  handelLoading.value = true;
  try {
    const res = await GetFileList<{
      list: FileDataFace[];
      total: number;
    }>({ groupName: groupName.value, keyword: inputValue.value });
    const strs = ["全部"];
    listData.value = res.list.map((e) => {
      if (!strs.includes(e.groupName) && e.groupName) {
        strs.push(e.groupName);
      }
      return e;
    });
    if (!groupName.value && !inputValue.value) {
      grupNames.value = strs.map((e, index) => {
        return { text: e, active: index };
      });
      $forceUpdate();
    }
  } catch (error) {
  } finally {
    handelLoading.value = false;
  }
};
const handeldragstart = (ev: any, item: FileDataFace) => {
  ev.dataTransfer.setData("Text", item.uUid);
};

const handelDrop = async (ev: any) => {
  ev.preventDefault();
  const uuid = ev.dataTransfer.getData("Text");
  let value = ev.target.attributes.is?.nodeValue || ("" as string);
  if (!value) {
    value = ev.target.parentNode.attributes.is?.nodeValue as string;
  }
  moveActive.value = 99999;
  if (value === "全部") return;
  if (!value) return;
  await UploadInformation({
    uUid: uuid,
    groupName: value,
  });
  getData();
};
const handelDropOver = (ev: any) => {
  ev.preventDefault();
  let value = ev.target.attributes.is?.nodeValue || "";
  if (!value) {
    value = ev.target.parentNode.attributes.is?.nodeValue;
  }
  moveActive.value = value;
};
onMounted(() => {
  getData();
});
</script>
<style lang="scss">
.grupName-item {
  .el-button {
    border-radius: 0;
    border: none;
  }
}
</style>
<style lang="scss" scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #00000030;
}
.imgBox {
  // width: 50%;
  height: 50%;
  background-color: #fff;
  border-radius: 6px;
  min-width: 400px;
  .box-top {
    height: 60px;
    width: 100%;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
  }
  .box-buttom {
    width: 100%;
    height: calc(100% - 60px);
    &-left {
      width: 100px;
      height: 100%;
      border-right: 1px solid #eee;
      // background-color: yellow;
      //   overflow-x: auto;
    }
    &-right {
      flex: 1;
      height: 100%;
      // background-color: aqua;
    }
  }
  .grupName-item {
    width: 100%;
  }
}
.warp {
  width: 100%;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  // grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
</style>
